{% extends 'base.html' %}

{% set current_page = 'dashboard' %}
{% set current_menu = 'project' %}

{% block title %}项目看板 - 项目管理系统{% endblock %}

{% block page_title %}{% endblock %}
{% block page_subtitle %}{% endblock %}

{% block content %}
<div class="container mx-auto space-y-6">
    <!-- 项目数量概览模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-primary">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-chart-line mr-2"></i>项目数量概览
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 已立项项目 -->
                <div class="bg-primary rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已立项项目</h3>
                    <p class="text-3xl font-bold flex items-center">{{ stats.total_projects }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 未开始项目 -->
                <div class="bg-gray-700 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">未开始项目</h3>
                    <p class="text-3xl font-bold flex items-center">{{ stats.not_started_projects }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 进行中项目 -->
                <div class="bg-blue-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">进行中项目</h3>
                    <p class="text-3xl font-bold flex items-center">{{ stats.in_progress_projects }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已结项项目 -->
                <div class="bg-green-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已结项项目</h3>
                    <p class="text-3xl font-bold flex items-center">{{ stats.completed_projects }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目类型分布和项目来源模块 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 项目类型分布模块 -->
        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
            <div class="px-4 py-3 bg-blue-500">
                <h2 class="text-lg font-semibold text-white flex items-center">
                    <i class="fas fa-pie-chart mr-2"></i>项目类型分布
                </h2>
            </div>
            <div class="p-6">
                <div class="h-64">
                    <div id="projectTypeChart" style="width: 100%; height: 100%;"></div>
                </div>
                <div class="mt-4">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">类型占比明细：</h3>
                    <ul class="space-y-2">
                        {% for i in range(project_types.labels|length) %}
                        <li class="flex items-center py-1 px-2 rounded-md hover:bg-gray-50 transition-colors">
                            <span class="inline-block w-3 h-3 mr-2 rounded-sm bg-[{{ project_types.backgroundColor[i] }}]"></span>
                            <span class="text-sm text-gray-700">{{ project_types.labels[i] }}: {{ project_types.data[i] }}个项目 ({{ "%.1f"|format(project_types.data[i]/stats.total_projects*100) }}%)</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 项目来源模块 -->
        <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
            <div class="px-4 py-3 bg-amber-500">
                <h2 class="text-lg font-semibold text-white flex items-center">
                    <i class="fas fa-chart-bar mr-2"></i>项目来源分布
                </h2>
            </div>
            <div class="p-6">
                <div class="h-64">
                    <div id="projectSourceChart" style="width: 100%; height: 100%;"></div>
                </div>
                <div class="mt-4">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">项目编号明细：</h3>
                    <ul class="space-y-2">
                        {% for i in range(project_sources.labels|length) %}
                        <li class="flex items-start py-1 px-2 rounded-md hover:bg-gray-50 transition-colors">
                            <span class="font-medium text-sm text-gray-700 mr-2">{{ project_sources.labels[i] }}:</span>
                            <span class="text-sm text-gray-500">{{ project_sources.project_numbers[i] }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 项目经理负载模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-green-500">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-users-cog mr-2"></i>项目经理负载情况
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tl-lg">项目经理</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责项目数量</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider rounded-tr-lg">联系方式</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for manager in managers_load %}
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 flex items-center">
                                <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-user text-gray-500"></i>
                                </div>
                                {{ manager.name }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
                                    {{ manager.count }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ manager.contact }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 项目任务进度模块 -->
    <div class="bg-white overflow-hidden shadow-lg rounded-xl border border-gray-100 transition-all duration-300 hover:shadow-xl">
        <div class="px-4 py-3 bg-red-500">
            <h2 class="text-lg font-semibold text-white flex items-center">
                <i class="fas fa-tasks mr-2"></i>项目任务进度
            </h2>
        </div>
        <div class="px-4 py-5 sm:p-6">
            <!-- 筛选条件 -->
            <div class="mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="projectFilter" class="block text-sm font-medium text-gray-700 mb-1">项目名称筛选：</label>
                        <select id="projectFilter" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-lg">
                            <option value="all">全部项目</option>
                            {% for project in all_projects %}
                            <option value="{{ project.id }}">{{ project.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">任务状态筛选：</label>
                        <div class="flex space-x-2">
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors">未开始</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">进行中</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-colors">已验收</button>
                            <button type="button" class="px-3 py-1 text-sm font-medium rounded-md text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors">已完成</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 任务数量展示 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- 里程碑任务数 -->
                <div class="bg-indigo-600 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">里程碑任务数</h3>
                    <p class="text-3xl font-bold flex items-center">{{ task_stats.milestone_tasks }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已验收里程碑任务数 -->
                <div class="bg-amber-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已验收里程碑任务数</h3>
                    <p class="text-3xl font-bold flex items-center">{{ task_stats.accepted_milestone_tasks }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 子任务任务数 -->
                <div class="bg-blue-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">子任务任务数</h3>
                    <p class="text-3xl font-bold flex items-center">{{ task_stats.sub_tasks }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
                
                <!-- 已验收任务数 -->
                <div class="bg-green-500 rounded-lg p-5 text-white transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                    <h3 class="text-sm font-medium text-white/80 mb-1">已验收任务数</h3>
                    <p class="text-3xl font-bold flex items-center">{{ task_stats.accepted_sub_tasks }}<span class="text-sm font-normal ml-2">(个)</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 确保ECharts库加载完成后再初始化图表
    function initCharts() {
        // 检查ECharts是否已加载
        if (typeof echarts === 'undefined') {
            console.error('ECharts库未加载');
            // 如果ECharts未加载，等待100ms后再次尝试
            setTimeout(initCharts, 100);
            return;
        }
        
        try {
            // 初始化ECharts实例
            // 项目类型分布饼图
            const projectTypeChart = echarts.init(document.getElementById('projectTypeChart'));
            
            // 准备数据 - 使用更安全的方式传递JSON数据
            const projectTypeData = JSON.parse('{{ project_types.data|tojson|safe }}');
            const projectTypeLabels = JSON.parse('{{ project_types.labels|tojson|safe }}');
            const projectTypeColors = JSON.parse('{{ project_types.backgroundColor|tojson|safe }}');
            
            // 构建饼图数据
            const pieData = [];
            for (let i = 0; i < projectTypeLabels.length; i++) {
                pieData.push({
                    value: projectTypeData[i],
                    name: projectTypeLabels[i],
                    itemStyle: {
                        color: projectTypeColors[i]
                    }
                });
            }
            
            // 设置饼图配置项
            const projectTypeOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c}个项目 ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    bottom: 0,
                    data: projectTypeLabels,
                    textStyle: {
                        fontFamily: 'Noto Sans SC',
                        fontSize: 12
                    }
                },
                series: [
                    {
                        name: '项目类型',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '40%'],
                        data: pieData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            borderColor: '#ffffff',
                            borderWidth: 1
                        }
                    }
                ]
            };
            
            // 使用配置项显示图表
            projectTypeChart.setOption(projectTypeOption);
            
            // 项目来源分布柱状图
            const projectSourceChart = echarts.init(document.getElementById('projectSourceChart'));
            
            // 准备数据 - 使用更安全的方式传递JSON数据
            const projectSourceData = JSON.parse('{{ project_sources.data|tojson|safe }}');
            const projectSourceLabels = JSON.parse('{{ project_sources.labels|tojson|safe }}');
            const projectSourceNumbers = JSON.parse('{{ project_sources.project_numbers|tojson|safe }}');
            
            // 设置柱状图配置项
            const projectSourceOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function(params) {
                        if (!params || !params.length || !params[0]) {
                            return '';
                        }
                        const dataIndex = params[0].dataIndex;
                        return projectSourceLabels[dataIndex] + '<br/>项目数量: ' + projectSourceData[dataIndex] + '<br/>项目编号: ' + projectSourceNumbers[dataIndex];
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: projectSourceLabels,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        fontFamily: 'Noto Sans SC'
                    }
                },
                yAxis: {
                    type: 'value',
                    minInterval: 1,
                    axisLabel: {
                        fontFamily: 'Noto Sans SC'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    }
                },
                series: [
                    {
                        name: '项目数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: projectSourceData,
                        itemStyle: {
                            color: '#4BC0C0',
                            borderColor: '#36A2EB',
                            borderWidth: 1
                        }
                    }
                ]
            };
            
            // 使用配置项显示图表
            projectSourceChart.setOption(projectSourceOption);
            
            // 响应窗口大小变化
            const handleResize = function() {
                projectTypeChart.resize();
                projectSourceChart.resize();
            };
            window.addEventListener('resize', handleResize);
            
            // 清理函数，防止内存泄漏
            window.addEventListener('beforeunload', function() {
                window.removeEventListener('resize', handleResize);
                projectTypeChart.dispose();
                projectSourceChart.dispose();
            });
            
            console.log('图表初始化成功');
        } catch (error) {
            console.error('初始化图表时出错:', error);
        }
    }
    
    // 在页面加载完成后初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        // 延迟执行以确保ECharts库已加载
        setTimeout(initCharts, 200);
    });
</script>

<!-- 引入ECharts -->
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
{% endblock %}

{% block extra_js %}
{{ super() }}
{% endblock %}